<script setup>
import { ref, reactive, onMounted } from 'vue'
import { listAdminOrders } from '../../api/admin'
import { updateOrderStatus } from '../../api/common'

const loading = ref(false)
const list = ref([])
const total = ref(0)
const query = reactive({ userId: '', doctorId: '', orderType: '', status: '', page: 1, size: 10 })

// 数字状态：1 待确认、2 已确认、3 已完成、4 已取消
const statusMap = [ 1, 2, 3, 4 ]
const orderTypeMap = [ 'PACKAGE', 'INDICATOR' ]

// 显示优化：状态与类型的中文映射与标签类型
const statusLabel = (s) => ({
  1: '待确认',
  2: '已确认',
  3: '已完成',
  4: '已取消',
}[s] || s)
const statusTagType = (s) => ({
  1: 'warning',
  2: 'info',
  3: 'success',
  4: 'danger',
}[s] || 'default')
const orderTypeLabel = (t) => ({
  PACKAGE: '套餐',
  INDICATOR: '项目',
}[t] || t)

const fetchList = async () => {
  loading.value = true
  try {
    const data = await listAdminOrders({ userId: query.userId || undefined, doctorId: query.doctorId || undefined, orderType: query.orderType || undefined, status: (query.status === '' ? undefined : query.status), page: query.page, size: query.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

const changeStatus = async (row, nextStatus) => {
  await updateOrderStatus(row.orderId, { status: nextStatus })
  fetchList()
}

onMounted(fetchList)
</script>

<template>
  <el-card>
    <h3>体检订单管理</h3>
    <el-form :inline="true" class="mb-2">
      <el-form-item label="用户ID"><el-input v-model="query.userId" /></el-form-item>
      <el-form-item label="医生ID"><el-input v-model="query.doctorId" /></el-form-item>
      <el-form-item label="类型">
        <el-select v-model="query.orderType" style="width:160px" placeholder="全部">
          <el-option label="全部" value="" />
          <el-option v-for="t in orderTypeMap" :key="t" :label="t" :value="t" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status" style="width:180px" placeholder="全部">
          <el-option label="全部" value="" />
          <el-option v-for="s in statusMap" :key="s" :label="s" :value="s" />
        </el-select>
      </el-form-item>
      <el-form-item><el-button type="primary" @click="query.page=1;fetchList()">查询</el-button></el-form-item>
    </el-form>
    <el-table :data="list" v-loading="loading">
      <el-table-column prop="orderId" label="订单ID" width="100" />
      <el-table-column prop="userId" label="用户ID" width="90" />
      <el-table-column prop="doctorId" label="医生ID" width="90" />
      <el-table-column label="类型" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.orderType==='PACKAGE'" size="small" type="success">{{ orderTypeLabel(row.orderType) }}</el-tag>
          <el-tag v-else-if="row.orderType==='INDICATOR'" size="small" type="info">{{ orderTypeLabel(row.orderType) }}</el-tag>
          <span v-else>{{ orderTypeLabel(row.orderType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="140">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderDate" label="下单日期" width="120" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" width="240">
        <template #default="{ row }">
          <el-select v-model="row.status" style="width:160px">
            <el-option v-for="s in statusMap" :key="s" :label="statusLabel(s)" :value="s" />
          </el-select>
          <el-button size="small" type="primary" class="ml-1" @click="changeStatus(row, row.status)">更新状态</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt-2" background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
  </el-card>
</template>

<style scoped>
.mb-2{ margin-bottom:12px; }
.mt-2{ margin-top:12px; }
.ml-1{ margin-left:8px; }
</style>